<template>
  <div>
     <!--  <mc-tree v-model="treeValue" :mcIsArray="true" :data="data" node-key="id" @mc-node-click="clickNode" @mc-current-change="changeNode"
                :mc-config="{'type':'pk','options':[],'api':{'method':'get','url':'/public/tree-arr.json','params':[],'fields':[],'limit':10},'nodeKey':'id','mcNodeParentKey':'pid'}"
       :default-expand-all="true" :expand-on-click-node="false">
         <template #content="scope"><span>{{scope.row.data.label}}</span></template>
       </mc-tree>
       <mc-tree v-model='treeValue1' :data='treeList'><template #content='scope'><span>{{scope.row.node.label}}</span></template></mc-tree>

-->
    <!--<mc-tree v-model='treeValue1' :mc-config="{'nodeKey':'uuid'}" :data='treeList'><template #content='scope'><span>{{scope.row.data.name}}</span></template></mc-tree>-->
    <!--<mc-tree :default-expand-all="true" v-model="treeValue"
             :data="treeList"
             :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'751278e63cd74a93975b535d23b68e9c'}"
             :mc-config="{'nodeKey':'uuid','mcNodeParentKey':'parentId','api':{'method':'post','url':'magical_lowcode/openapi/crud/tree_table/list','params':[],'fields':[],'limit':10}}">
      <template #content="scope">
        <span class="mc-span-pane">{{scope.row.data.name}}</span>
      </template>
    </mc-tree>-->
    <mc-tree v-model="treeValue" ref="mctree" :data="treeList" :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'3c82679a9da24107ba37fc7fe4f1d77a'}" :mc-config="{'nodeKey':'uuid','mcNodeParentKey':'parentId','api':{'method':'post','url':'magical_lowcode/openapi/crud/tree_table/list','params':[],'fields':[],'limit':10}}" :mc-pop-tree="false">
      <template #content="scope">
        <span class="mc-span-pane">{{scope.row.data.name}}</span>
      </template>
      <template #pop-view="scope">
			<span class="mc-span-pane">
				<el-input readonly v-model="scope.row.name" placeholder="点击选择" suffix-icon="el-icon-caret-bottom"></el-input>
			</span>
      </template>
    </mc-tree>
    <mc-tree :mcPopTree="true" @mc-choose="choose" :default-expand-all="true" v-model="treeValue" :data="treeList"
              :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'751278e63cd74a93975b535d23b68e9c'}"
              :mc-config="{'nodeKey':'uuid','mcNodeParentKey':'parentId','api':{'method':'post','url':'magical_lowcode/openapi/crud/tree_table/list','params':[],'fields':[],'limit':10}}">
      <template #content="scope">
        <span class="mc-span-pane">{{scope.row.data.name}}</span>
      </template>
      <template #pop-view="scope">
        <span class="mc-span-pane">
          <el-input readonly v-model="scope.row.name" placeholder="点击选择" suffix-icon="el-icon-caret-bottom"></el-input>
        </span>
      </template>
    </mc-tree>
    <!--<el-popover
      placement="bottom"
      width="200"
      trigger="click"
      >
      <mc-tree @mc-choose="choose" :default-expand-all="true" v-model="treeValue" :data="treeList" :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'751278e63cd74a93975b535d23b68e9c'}" :mc-config="{'nodeKey':'uuid','mcNodeParentKey':'parentId','api':{'method':'post','url':'magical_lowcode/openapi/crud/tree_table/list','params':[],'fields':[],'limit':10}}">
        <template #content="scope">
          <span class="mc-span-pane">{{scope.row.data.name}}</span>
        </template>
      </mc-tree>
      <el-button slot="reference">click 激活</el-button>
    </el-popover>-->

       <el-button @click="print">打印</el-button>
       <el-button @click="change">改变</el-button>
       <el-button @click="change2">改变2</el-button>
  </div>
</template>

<script>
import McTree from "./components/McTree";
import McCommon from "./components/McCommon"
export default {
    data(){
      return {
        treeValue:"",
        data:[],
        treeValue1:"2",
        treeList:[{uuid:"1",name:"a"},{uuid:"2",name:"2",pid:"1"}]
      }
    },
    components:{
      McTree
    },
    methods:{
      choose(data){
        console.log(data)
      },
        print(){
            console.log(this.treeValue)
            console.log(this.data)
        },
        change(){
            //this.treeValue = "3";
            //this.$emit("update:data",[])
            //this.treeList.splice(0,1000)
            //this.treeList.length=[]
            this.$refs.mctree.empty()
        },
      change2(){
        this.$refs.mctree.setData([{uuid:"1",name:"a1"},{uuid:"2",name:"22",pid:"1"}])
      },
        clickNode(v){
          console.log(v)
        },
        changeNode(v){
          console.log(v)
        }
    }
}
</script>

<style>

</style>
